<script setup lang="ts">
import { inspectPlanQueryPage } from "@/api/equip/inspect";
import { stringTrimOfParams } from "@/utils/common";
import EquipClassSelect from "@/views/all/equip/components/EquipClassSelect.vue";
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRoute } from "vue-router";
import Detail from "./detail.vue";
import List from "./list.vue";

const route = useRoute();
const {
  query: { source, className }
} = route;
const tagArr = ["", "info", "warning", "", "danger"];
const state = reactive<any>({
  systemList: [],
  queryParams: {
    planCode: "",
    planCodeOrName: "",
    className: "",
    inspectType: "",
    pageNum: 1,
    pageSize: 20
  },
  total: 0,
  tableColumns: [
    { prop: "planCode", label: "计划编号", minWidth: "200", showOverflowTooltip: true, fixed: "left", planCode: true },
    { prop: "planName", label: "计划名称", minWidth: "200", showOverflowTooltip: true },
    { prop: "execStartDate,execEndDate", label: "执行期", minWidth: "240", showOverflowTooltip: true },
    // { prop: "inspectTypeDesc", label: "系统", minWidth: "120", showOverflowTooltip: true },
    { prop: "classNameDesc", label: "科室", minWidth: "100", showOverflowTooltip: true },
    { prop: "planStatusDesc", label: "状态", minWidth: "120", showOverflowTooltip: true }
  ],
  tableData: [],
  planNo: "",
  tableForm: null
});
const { tableForm, queryParams, tableColumns, total, tableData } = toRefs(state);
// 请求表格数据
const queryTable = async () => {
  const params = JSON.parse(JSON.stringify(queryParams.value));
  const data: any = await inspectPlanQueryPage(stringTrimOfParams(params));
  tableData.value = data?.data;
  total.value = data?.total;
};
// 重置表格
const resetTable = async () => {
  tableForm?.value.resetFields();
  queryTable();
};
// 外部封装好的组件
// 科室组件调用父组件
const changeClassName = val => {
  queryParams.value.className = val;
  // queryParams.value.systemCode = "";
  // systemCodes.value = [];
  // queryParams.value.categoryId = null;
  // queryParams.value.typeId = null;
  // queryParams.value.modelId = null;
};
// // 可是改变
// function changeCheckGroup(row: any) {
//   queryParams.value.className = row;
// }
// 进入页面时触发
onMounted(() => {
  if (className) {
    queryParams.value.className = className;
  }
  queryTable();
});
function dealTime(execStartDate, execEndDate) {
  if (execStartDate && execEndDate) {
    return `${execStartDate?.split(" ")[0]}~${execEndDate?.split(" ")[0]}`;
  }
  return "-";
}
// 巡检记录
const page = ref("home"); // 当前显示页面，home:计划列表页，list:区域列表页，detail:详情页
const query = ref<any>({}); // 区域列表页参数
const detailQuery = ref(); // 详情页参数
// 显示区域列表页
function handleView(row: any) {
  const { execEndDate, execStartDate, planCode } = row;
  query.value = { execEndDate, execStartDate, planCode };
  page.value = "list";
}
</script>
<template>
  <div>
    <!-- 计划列表 -->
    <div v-if="page === 'home'" class="equip-wrap-common" :style="`height:${source === 'handover' ? 'auto' : undefined}`">
      <!-- 搜索功能 -->
      <px-form ref="tableForm" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16">
          <px-col :span="5">
            <px-form-item prop="planCodeOrName" label="计划名称">
              <px-input clearable v-model="queryParams.planCodeOrName" placeholder="请输入巡检计划名称/编号" maxlength="50" @keyup.enter="queryTable">
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <!-- 科室 -->
            <EquipClassSelect :className="queryParams.className" @changeClassName="changeClassName" />
          </px-col>
          <px-col :span="4">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <!-- 表格功能 -->
      <px-table :data="tableData" class="equip-table" size="small" :height="`${source === 'handover' ? '500px' : 'calc(100vh - 264px)'}`" border>
        <px-table-column label="序号" min-width="50" align="center" fixed="left">
          <template #default="{ $index }">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
          </template>
        </px-table-column>
        <template v-for="(item, index) in tableColumns" :key="index">
          <px-table-column
            v-if="item.prop === 'execStartDate,execEndDate'"
            :label="item.label"
            :min-width="item.minWidth"
            :align="item.align"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          >
            <template #default="scope">{{ dealTime(scope.row["execStartDate"], scope.row["execEndDate"]) }}</template>
          </px-table-column>
          <px-table-column
            v-else-if="item.label === '状态'"
            :label="item.label"
            :align="item.align ? item.align : 'left'"
            :min-width="item.minWidth"
            :fixed="item.fixed"
          >
            <template #default="scope">
              <px-tag class="ml-2" :type="tagArr[scope.row['planStatus']]">{{ scope.row["planStatusDesc"] }}</px-tag>
            </template>
          </px-table-column>
          <px-table-column
            v-else
            :label="item.label"
            :min-width="item.minWidth"
            :align="item.align"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          >
            <template #default="scope">{{
              scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
            }}</template>
          </px-table-column>
        </template>

        <px-table-column fixed="right" label="操作" min-width="200" align="center">
          <template #default="scope">
            <!-- 详情 -->
            <px-tooltip content="巡检记录" placement="top">
              <px-button v-has="'ALL_EQUIP_INSPECT_RECORDING_LIST'" link type="primary" icon="Tickets" @click="handleView(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="equip-table-pagination"
        :total="total"
        @pagination="queryTable"
      />
    </div>
    <!-- 区域列表 -->
    <List v-if="page === 'list'" v-model:page="page" v-model:detailQuery="detailQuery" :query="query" />
    <!-- 详情 -->
    <Detail v-if="page === 'detail'" v-model:page="page" :query="detailQuery" :planCode="query.planCode" />
  </div>
</template>
<style lang="scss" scoped>
// @import url("../scss/table-list.scss");
@import url("@/views/all/equip/scss/table-list.scss");
</style>
